<template>
    <div class="zqxt_wrap">
        <div class="page-content">
            <div class="top-panel">
                <div class="panel-item">
                    <div class="panel-title">整流柜</div>
                    <div class="panel-content">
                        <div class="stats-box">
                             <div class="stats-item">
                                 <!--1-->
                                 <div class="stats-item-num">{{ valveState[16442] | formatFlowValue }}<span class="stats-item-unit">v</span></div>
                                 <div class="stats-item-label">电压</div>
                             </div>
                             <div class="stats-item">
                                 <!--2-->
                                 <div class="stats-item-num">{{ valveState[16443] | formatFlowValue }}<span class="stats-item-unit">A</span></div>
                                 <div class="stats-item-label">电流</div>
                             </div>
                        </div>
                        <!--30-->
                        <el-button class="hy_btn is_primary" type="primary" @click="btnClick()" :disabled="!!valveState[7]">启动</el-button>
                    </div>
                </div>

                <div class="panel-item">
                    <div class="panel-title">设备操作</div>
                    <div class="panel-content">
                        <div class="handle-item">
                            <!--31-->
                            <el-button class="hy_btn is_primary" type="primary" @click="btnClick()" :disabled="!!valveState[8]">启动</el-button>
                            <div class="item-info">
                                <span class="item-text">系统压力设定</span>
                                <!--3-->
                                <span class="item-value is_hover" @click="btnClick()">{{ valveState[11000] | formatFlowValue }}</span>
                                <span class="item-text">MPa</span>
                            </div>
                            <div class="item-info">
                                <span class="item-text">碱液1加热设定</span>
                                <!--5-->
                                <span class="item-value is_hover" @click="btnClick()">{{ valveState[11002] | formatFlowValue }}</span>
                                <span class="item-text">°C</span>
                            </div>
                        </div>
                        <div class="handle-item">
                            <!--32-->
                            <el-button class="hy_btn " type="danger" plain @click="btnClick()" :disabled="!!valveState[9]">停机</el-button>
                            <div class="item-info">
                                <span class="item-text">系统电流设定</span>
                                <!--4-->
                                <span class="item-value is_hover" @click="btnClick()">{{ valveState[11001] | formatFlowValue }}</span>
                                <span class="item-text">A</span>
                            </div>
                            <div class="item-info">
                                <span class="item-text">碱液2加热设定</span>
                                <!--6-->
                                <span class="item-value is_hover" @click="btnClick()">{{ valveState[11003] | formatFlowValue }}</span>
                                <span class="item-text">°C</span>
                            </div>
                        </div>

                    </div>

                </div>

                <div class="panel-item">
                    <div class="panel-title">重要数据展示</div>
                    <div class="panel-content">
                        <div class="list-item">
                            <!--7-->
                            <div class="list-item-num">{{ valveState[16442] | formatFlowValue }}<span class="list-item-unit">MM</span></div>
                            <div class="list-item-label">氧液位</div>
                        </div>
                        <div class="list-item">
                            <!--9-->
                            <div class="list-item-num">{{ valveState[16442] | formatFlowValue }}<span class="list-item-unit">°C</span></div>
                            <div class="list-item-label">氧槽温</div>
                        </div>
                        <div class="list-item">
                            <!--11-->
                            <div class="list-item-num">{{ valveState[16442] | formatFlowValue }}<span class="list-item-unit">%</span></div>
                            <div class="list-item-label">氢中氧</div>
                        </div>
                        <div class="list-item">
                            <!--13-->
                            <div class="list-item-num">{{ valveState[16442] | formatFlowValue }}<span class="list-item-unit">%</span></div>
                            <div class="list-item-label">冷却水调节阀</div>
                        </div>
                        <div class="list-item">
                            <!--8-->
                            <div class="list-item-num">{{ valveState[16443] | formatFlowValue }}<span class="list-item-unit">MM</span></div>
                            <div class="list-item-label">氧液位</div>
                        </div>
                        <div class="list-item">
                            <!--10-->
                            <div class="list-item-num">{{ valveState[16443] | formatFlowValue }}<span class="list-item-unit">°C</span></div>
                            <div class="list-item-label">氧槽温</div>
                        </div>
                        <div class="list-item">
                            <!--12-->
                            <div class="list-item-num">{{ valveState[16443] | formatFlowValue }}<span class="list-item-unit">%</span></div>
                            <div class="list-item-label">氢中氧</div>
                        </div>
                        <div class="list-item">
                            <!--14-->
                            <div class="list-item-num">{{ valveState[16443] | formatFlowValue }}<span class="list-item-unit">A/m²</span></div>
                            <div class="list-item-label">电流密度</div>
                        </div>
                    </div>

                </div>
            </div>


            <div class="middle-panel">
                <div class="panel-item">
                    <div>
                        <!--15-->
                        <span :class="`flow-valve ${ valveState[0] ? 'is_close' : '' }`"></span>
                        <!--20-->
                        <span :class="`flow-valve ${ valveState[1] ? 'is_close' : '' }`"></span>
                        <!--22-->
                        <span :class="`flow-valve ${ valveState[3] ? 'is_close' : '' }`"></span>
                        <!--25-->
                        <span :class="`flow-valve ${ valveState[4] ? 'is_close' : '' }`"></span>
                    </div>

                    <div>
                        <span class="flow-text">氧气出口</span>
                        <span class="flow-text">氧气出口</span>
                        <!--16-->
                        <span class="flow-text">氧侧调节阀<br/>（{{ valveState[16444] | formatFlowValue }}%）</span>
                        <span class="flow-text">分离器</span>
                        <span class="flow-text">冷却器</span>
                        <span class="flow-text">冷却器</span>
                        <span class="flow-text">分离器</span>
                        <!--19-->
                        <span class="flow-text">氧侧调节阀<br/>（{{ valveState[16444] | formatFlowValue }}%）</span>
                        <span class="flow-text">氧分离器</span>
                        <span class="flow-text">氧分离器</span>
                        <span class="flow-text">碱泵</span>
                        <span class="flow-text">碱泵</span>
                        <span class="flow-text">电解槽</span>
                        <span class="flow-text">碱液过滤器</span>
                        <span class="flow-text">碱液过滤器</span>
                    </div>

                    <div>
                        <span class="flow-value">
                            氧气纯度
                            <!--17-->
                            <div class="item-value">{{ valveState[16442] | formatFlowValue }}</div>
                            <!--<el-input class="item-value" v-model="value" placeholder=""></el-input>-->
                            %
                        </span>
                        <span class="flow-value">
                            氧气纯度
                            <!--18-->
                            <div class="item-value">{{ valveState[16443] | formatFlowValue }}</div>
                            <!--<el-input class="item-value" v-model="value" placeholder=""></el-input>-->
                            %
                        </span>
                        <span class="flow-value is_right">
                            系统压力
                            <!--21-->
                            <div class="item-value">{{ valveState[16442] | formatFlowValue }}</div>
                            <!--<el-input class="item-value" v-model="value" placeholder=""></el-input>-->
                            MPa
                        </span>
                        <!--23-->
                        <span class="flow-value is_right">氧侧碱液温度<br/>{{ valveState[16444] | formatFlowValue }} °C</span>
                        <!--26-->
                        <span class="flow-value is_left">氧侧碱液温度<br/>{{ valveState[16443] | formatFlowValue }} °C</span>
                        <!--24-->
                        <span class="flow-value">碱液流量<br/>{{ valveState[16444] | formatFlowValue }}L/h</span>
                        <!--27-->
                        <span class="flow-value">碱液流量<br/>{{ valveState[16444] | formatFlowValue }}L/h</span>
                    </div>

                    <div>
                        <img class="flow-icon" src="../../assets/images/zqxt/icon_snowflake.png" alt="">
                        <img class="flow-icon" src="../../assets/images/zqxt/icon_snowflake.png" alt="">
                        <img class="flow-icon" src="../../assets/images/zqxt/icon_fan.png" alt="">
                        <img class="flow-icon" src="../../assets/images/zqxt/icon_fan.png" alt="">
                    </div>
                </div>

                <div class="panel-item">
                    <div class="chart-box" ref="lineChart"></div>
                </div>
            </div>


            <div class="bottom-panel">
                <div class="panel-title">告警故障信息</div>

                <div class="panel-content">
                    <div class="content-item">
                        <div class="item-head">
                            <span class="item-head-td">元件</span>
                            <span class="item-head-td">告警状态</span>
                        </div>
                        <div class="item-body">
                            <vue-scroll :ops="$root.scrollOpsY">
                                <div class="item-body-tr" >
                                    <span class="item-head-td">整流柜故障</span>
                                    <span class="item-head-td"><span :class="valveState[6]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">制氢框架急停 A2</span>
                                    <span class="item-head-td"><span :class="valveState[7]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">氢纯化框架急停</span>
                                    <span class="item-head-td"><span :class="valveState[8]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">氢纯化框架急停</span>
                                    <span class="item-head-td"><span :class="valveState[9]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">碱泵1运行反馈</span>
                                    <span class="item-head-td"><span :class="valveState[10]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">碱泵1运行反馈</span>
                                    <span class="item-head-td"><span :class="valveState[6]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">碱泵2运行反馈</span>
                                    <span class="item-head-td"><span :class="valveState[7]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">碱泵2运行反馈</span>
                                    <span class="item-head-td"><span :class="valveState[8]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">配碱泵故障</span>
                                    <span class="item-head-td"><span :class="valveState[9]?'is_red':''"></span></span>
                                </div>
                            </vue-scroll>
                        </div>

                    </div>
                    <div class="content-item">
                        <div class="item-head">
                            <span class="item-head-td">元件</span>
                            <span class="item-head-td">告警状态</span>
                        </div>
                        <div class="item-body">
                            <vue-scroll :ops="$root.scrollOpsY">
                                <div class="item-body-tr" >
                                    <span class="item-head-td">氧侧液位高</span>
                                    <span class="item-head-td"><span :class="valveState[10]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">氧侧液位低</span>
                                    <span class="item-head-td"><span :class="valveState[6]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">氧侧液位高</span>
                                    <span class="item-head-td"><span :class="valveState[7]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">氧侧液位低</span>
                                    <span class="item-head-td"><span :class="valveState[8]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">碱泵1绕组温度H</span>
                                    <span class="item-head-td"><span :class="valveState[9]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">碱泵2绕组温度H</span>
                                    <span class="item-head-td"><span :class="valveState[10]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">排风机运行反馈</span>
                                    <span class="item-head-td"><span :class="valveState[6]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">排风机故障反馈</span>
                                    <span class="item-head-td"><span :class="valveState[7]?'is_red':''"></span></span>
                                </div>
                            </vue-scroll>
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="item-head">
                            <span class="item-head-td">元件</span>
                            <span class="item-head-td">告警状态</span>
                        </div>
                        <div class="item-body">
                            <vue-scroll :ops="$root.scrollOpsY">
                                <div class="item-body-tr" >
                                    <span class="item-head-td">除盐水泵1运行</span>
                                    <span class="item-head-td"><span :class="valveState[8]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">除盐水泵1故障</span>
                                    <span class="item-head-td"><span :class="valveState[9]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">除盐水泵2运行</span>
                                    <span class="item-head-td"><span :class="valveState[10]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">除盐水泵2故障</span>
                                    <span class="item-head-td"><span :class="valveState[6]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">冷冻机运行</span>
                                    <span class="item-head-td"><span :class="valveState[7]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">冷冻机故障</span>
                                    <span class="item-head-td"><span :class="valveState[8]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">除盐水出口压力低</span>
                                    <span class="item-head-td"><span :class="valveState[9]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">配碱泵运行</span>
                                    <span class="item-head-td"><span :class="valveState[10]?'is_red':''"></span></span>
                                </div>
                            </vue-scroll>
                        </div>
                    </div>
                </div>
            </div>

            <ControlDialog ref="controlDialog"
                           :dialogTitle="dialogTitle"
            ></ControlDialog>
        </div>
    </div>
</template>

<script>
    import ControlDialog from '../ControlDialog';

    export default {
        components: {
            ControlDialog,
        },
        data() {
            return {
                value: '',
                alterList: [
                    [
                        {name: '整流柜故障', status: 0},
                        {name: '制氢框架急停 A2', status: 1},
                        {name: '氢纯化框架急停', status: 0},
                        {name: '氢纯化框架急停', status: 1},
                        {name: '碱泵1运行反馈', status: 1},
                        {name: '碱泵1运行反馈', status: 0},
                        {name: '碱泵2运行反馈', status: 0},
                        {name: '碱泵2运行反馈', status: 1},
                        {name: '配碱泵故障', status: 0},
                    ],
                    [
                        {name: '氧侧液位高', status: 0},
                        {name: '氧侧液位低', status: 1},
                        {name: '氧侧液位高', status: 0},
                        {name: '氧侧液位低', status: 1},
                        {name: '碱泵1绕组温度H', status: 1},
                        {name: '碱泵2绕组温度H', status: 0},
                        {name: '排风机运行反馈', status: 0},
                        {name: '排风机故障反馈', status: 0},
                    ],
                    [
                        {name: '除盐水泵1运行', status: 0},
                        {name: '除盐水泵1故障', status: 1},
                        {name: '除盐水泵2运行', status: 0},
                        {name: '除盐水泵2故障', status: 1},
                        {name: '冷冻机运行', status: 1},
                        {name: '冷冻机故障', status: 0},
                        {name: '除盐水出口压力低', status: 0},
                        {name: '配碱泵运行', status: 0},
                    ],
                ],
                dialogTitle: '控制类弹窗',
                valveState: {},
            }
        },
        methods: {
            getData() {
                this.$api.queryTempquery(
                    [
                        {
                            target: 'h2-01',
                            address: [
                                16442,
                                16443,
                                16442,
                                16443,
                                16442,
                                16443,
                                16442,
                                16443,
                                16442,
                                16443,
                                0,
                                16444,
                                16442,
                                16443,
                                16444,
                                1,
                                16442,
                                3,
                                16444,
                                16444,
                                4,
                                16443,
                                16444,
                                6,
                                7,
                                8,
                                9,
                                10,
                                6,
                                7,
                                8,
                                9,
                                10,
                                6,
                                7,
                                8,
                                9,
                                10,
                                6,
                                7,
                                8,
                                9,
                                10,
                                6,
                                7,
                                8,
                                9,
                                10,
                            ],
                        },
                        {
                            target: 'virtual',
                            address: [
                                11000,
                                11001,
                                11002,
                                11003,
                            ],
                        }
                    ]
                ).then(( res )=> {
                    var obj = {};

                    for( var j=0; j<res.length; j++ ) {
                        var data = res[j].result || [];

                        for( var i=0; i<data.length; i++ ) {
                            obj[ data[i].address ] = data[i].value;
                        }
                    }

                    this.valveState = obj;
                    console.log("res==>",obj)
                })
            },

            /**
             * 获取折线图数据
             */
            getLineChartData() {
                this.$api.queryCharts(
                    {
                        Name: 'h2-01_pv_power',
                        selector: 'MEAN',
                        begin: this.formatDate( 'YYYY-mm-dd', new Date() ) + ' 00:00:00',
                        end: this.formatDate( 'YYYY-mm-dd HH:MM:SS', new Date() ),
                        groupBlock: '15m',
                    }
                ).then(( res )=> {
                    var names = [];
                    var value = [];
                    var data = res.data;

                    for( var i=0; i<data.length; i++ ) {
                        names.push( this.formatDate( 'HH:MM', new Date( data[i][0] ) ) );
                        value.push( parseInt( data[i][1] ) );
                    }

                    this.chartLoad(
                        {
                            names: names,
                            value: value,
                        }
                    );
                }).catch(( err )=> {

                })
            },

            chartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs.lineChart );

                var option = {
                    grid: {
                        top: '13%',
                        right: '7%',
                        bottom: '7%',
                        left: '6%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b} {c}',
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: '',
                            type: 'line',
                            smooth: true,
                            showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#2C50EE',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(44,80,238,0.1)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(44,80,238,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value,
                        },
                    ],
                };

                chart.setOption( option );
            },

            btnClick() {
                this.$refs.controlDialog.dialogVisible = true;
            },
        },
        mounted() {
            this.getData();
            this.getLineChartData();
        }
    }
</script>

<style lang="less">
    .zqxt_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            padding-bottom: 28px;

            >.top-panel {
                height: 260px;
                width: 100%;
                margin-bottom: 28px;
                padding-top: 12px;

                >.panel-item {
                    display: inline-block;
                    vertical-align: top;
                    height: 100%;
                    margin-right: 28px;
                    background: #FFFFFF;
                    border-radius: 8px;
                    padding: 40px;
                    box-sizing: border-box;

                    .panel-content {
                        width: 100%;
                        height: calc( 100% - 28px );
                    }

                    &:nth-of-type( 1 ) {
                        width: 230px;
                        text-align: center;

                        .panel-title {
                            text-align: left;
                        }

                        .stats-box {
                            margin-top: 30px;
                            text-align: left;

                            >.stats-item {
                                display: inline-block;
                                vertical-align: top;
                                width: 50%;
                                padding-left: 20px;
                                box-sizing: border-box;

                                >.stats-item-num {
                                    font-size: 28px;
                                    font-weight: 600;
                                    color: #0E1526;
                                    line-height: 35px;

                                    .stats-item-unit {
                                        font-size: 16px;
                                    }
                                }

                                >.stats-item-label {
                                    font-size: 16px;
                                    color: #535763;
                                    line-height: 23px;
                                }
                            }
                        }

                        .hy_btn {
                            width: 120px;
                            margin-top: 22px;
                        }
                    }

                    &:nth-of-type( 2 ) {
                        width: 640px;

                        .panel-content {
                            padding-top: 37px;
                            box-sizing: border-box;

                            >.handle-item {
                                margin-bottom: 34px;

                                >.hy_btn {
                                    width: 120px;
                                    vertical-align: middle;
                                    margin-right: 22px;
                                }

                                >.item-info {
                                    display: inline-block;
                                    vertical-align: middle;
                                    line-height: 40px;
                                    width: calc( (100% - 144px) / 2 );

                                    .item-text {
                                        font-size: 16px;
                                        color: #333333;
                                    }

                                    .item-value {
                                        display: inline-block;
                                        vertical-align: top;
                                        margin: 0 4px;
                                        width: 60px;
                                        height: 40px;
                                        background: #F9FAFE;
                                        border-radius: 4px;
                                        border: 1px solid #EEEFF2;
                                        box-sizing: border-box;
                                        font-size: 20px;
                                        font-weight: 600;
                                        color: #333333;
                                        line-height: 38px;
                                        text-align: center;
                                    }

                                    &:last-child {
                                        padding-left: 10px;
                                        box-sizing: border-box;
                                    }
                                }

                                .el-input {
                                    width: 60px;
                                    height: 32px;
                                    margin: 0 5px;
                                    vertical-align: top;

                                    /deep/.el-input__inner {
                                        height: 32px;
                                        line-height: 32px;
                                        background: #F9FAFE;
                                        border-radius: 4px;
                                        border: 1px solid #EEEFF2;
                                    }
                                }
                            }
                        }
                    }

                    &:nth-of-type( 3 ) {
                        width: calc( 100% - 230px - 640px - 28px - 28px );
                        margin-right: 0;

                        .panel-content {
                            padding-top: 34px;
                            box-sizing: border-box;
                        }

                        .list-item {
                            display: inline-block;
                            vertical-align: top;
                            width: 25%;
                            height: 69px;
                            padding-left: 10px;
                            box-sizing: border-box;

                            >.list-item-num {
                                font-size: 26px;
                                font-weight: 600;
                                color: #333333;
                                line-height: 30px;

                                .list-item-unit {
                                    font-size: 16px;
                                }
                            }

                            >.list-item-label {
                                font-size: 16px;
                                color: #535763;
                                line-height: 18px;
                            }
                        }
                    }
                }
            }

            >.middle-panel {
                height: 620px;
                width: 100%;
                margin-bottom: 28px;

                >.panel-item {
                    display: inline-block;
                    vertical-align: top;
                    height: 100%;
                    margin-right: 28px;
                    background: #FFFFFF;
                    border-radius: 8px;
                    position: relative;

                    &:nth-of-type( 1 ) {
                        width: 898px;
                        background-image: url("../../assets/images/zqxt/img_flow.png");
                        background-position: center 101px;
                        background-repeat: no-repeat;

                        .flow-valve {
                            position: absolute;
                            width: 24px;
                            height: 22px;
                            background-image: url("../../assets/images/zqxt/icon_valve_open.png");
                            background-size: 100% 100%;

                            &.is_close {
                                background-image: url("../../assets/images/zqxt/icon_valve_close.png");
                            }

                            &:nth-of-type( 1 ) {
                                top: 114px;
                                left: 49px;
                            }

                            &:nth-of-type( 2 ) {
                                top: 114px;
                                left: 830px;
                            }

                            &:nth-of-type( 3 ) {
                                top: 253px;
                                left: 289px;
                            }

                            &:nth-of-type( 4 ) {
                                top: 253px;
                                left: 589px;
                            }
                        }

                        .flow-text {
                            position: absolute;
                            text-align: center;
                            font-size: 14px;
                            color: #333333;
                            line-height: 20px;

                            &:nth-of-type( 1 ) {
                                top: 84px;
                                left: 29px;
                            }

                            &:nth-of-type( 2 ) {
                                top: 84px;
                                left: 815px;
                            }

                            &:nth-of-type( 3 ) {
                                top: 175px;
                                left: 80px;
                            }

                            &:nth-of-type( 4 ) {
                                top: 175px;
                                left: 217px;
                            }

                            &:nth-of-type( 5 ) {
                                top: 175px;
                                left: 339px;
                            }

                            &:nth-of-type( 6 ) {
                                top: 175px;
                                left: 519px;
                            }

                            &:nth-of-type( 7 ) {
                                top: 175px;
                                left: 643px;
                            }

                            &:nth-of-type( 8 ) {
                                top: 175px;
                                left: 752px;
                            }

                            &:nth-of-type( 9 ) {
                                top: 324px;
                                left: 335px;
                            }

                            &:nth-of-type( 10 ) {
                                top: 324px;
                                left: 510px;
                            }

                            &:nth-of-type( 11 ) {
                                top: 404px;
                                left: 186px;
                            }

                            &:nth-of-type( 12 ) {
                                top: 404px;
                                left: 688px;
                            }

                            &:nth-of-type( 13 ) {
                                top: 519px;
                                left: 429px;
                            }

                            &:nth-of-type( 14 ) {
                                top: 540px;
                                left: 165px;
                            }

                            &:nth-of-type( 15 ) {
                                top: 540px;
                                left: 667px;
                            }
                        }

                        .flow-value {
                            color: #333333;
                            font-size: 14px;
                            position: absolute;
                            padding: 8px 10px;
                            box-sizing: border-box;
                            min-width: 80px;
                            line-height: 32px;
                            background-color: rgba(249, 250, 254, 0.8);
                            border-radius: 4px;
                            border: 1px solid #dddddd;
                            text-align: center;

                            &:after {
                                content: ' ';
                                position: absolute;
                                bottom: -8px;
                                left: 0;
                                right: 0;
                                margin: auto;
                                width: 0;
                                height: 0;
                                border-left: 5px solid transparent;
                                border-right: 5px solid transparent;
                                border-top: 8px solid #F9FAFE;
                            }

                            &:before {
                                content: ' ';
                                position: absolute;
                                bottom: -10px;
                                left: 0;
                                right: 0;
                                margin: auto;
                                width: 0;
                                height: 0;
                                border-left: 6px solid transparent;
                                border-right: 6px solid transparent;
                                border-top: 10px solid #dddddd;
                            }

                            &.is_left {

                                &:after {
                                    bottom: 0;
                                    top: 0;
                                    right: unset;
                                    left: -8px;
                                    border-top: 5px solid transparent;
                                    border-bottom: 5px solid transparent;
                                    border-right: 8px solid #F9FAFE;
                                    border-left: unset;
                                }

                                &:before {
                                    bottom: 0;
                                    top: 0;
                                    right: unset;
                                    left: -10px;
                                    border-top: 5px solid transparent;
                                    border-bottom: 5px solid transparent;
                                    border-right: 10px solid #dddddd;
                                    border-left: unset;
                                }
                            }

                            &.is_right {

                                &:after {
                                    bottom: 0;
                                    top: 0;
                                    left: unset;
                                    right: -8px;
                                    border-top: 5px solid transparent;
                                    border-bottom: 5px solid transparent;
                                    border-left: 8px solid #F9FAFE;
                                    border-right: unset;
                                }

                                &:before {
                                    bottom: 0;
                                    top: 0;
                                    left: unset;
                                    right: -10px;
                                    border-top: 5px solid transparent;
                                    border-bottom: 5px solid transparent;
                                    border-left: 10px solid #dddddd;
                                    border-right: unset;
                                }
                            }

                            >.item-value {
                                display: inline-block;
                                width: 60px;
                                height: 32px;
                                /*margin: 0 5px;*/
                                vertical-align: top;
                                line-height: 32px;
                                background: #ffffff;
                                border-radius: 4px;
                                border: 1px solid #EEEFF2;
                                color: #2C50EE;
                                font-weight: 600;
                            }

                            .el-input {
                                width: 60px;
                                height: 32px;
                                /*margin: 0 5px;*/
                                vertical-align: top;

                                .el-input__inner {
                                    height: 32px;
                                    line-height: 32px;
                                    background: #ffffff;
                                    border-radius: 4px;
                                    border: 1px solid #EEEFF2;
                                    color: #2C50EE;
                                    font-weight: 600;
                                }
                            }

                            &:nth-of-type( 1 ) {
                                top: 50px;
                                left: 218px;
                            }

                            &:nth-of-type( 2 ) {
                                top: 50px;
                                left: 528px;
                            }

                            &:nth-of-type( 3 ) {
                                top: 191px;
                                left: 233px;
                            }

                            &:nth-of-type( 4 ) {
                                top: 282px;
                                left: 77px;
                                line-height: 18px;
                            }

                            &:nth-of-type( 5 ) {
                                top: 282px;
                                left: 719px;
                                line-height: 18px;
                            }

                            &:nth-of-type( 6 ) {
                                top: 398px;
                                left: 47px;
                                line-height: 18px;
                            }

                            &:nth-of-type( 7 ) {
                                top: 398px;
                                left: 775px;
                                line-height: 18px;
                            }

                        }

                        .flow-icon {
                            position: absolute;
                            animation: turn 6s linear infinite;

                            &:nth-of-type( 1 ) {
                                top: 117px;
                                left: 349px;
                            }

                            &:nth-of-type( 2 ) {
                                top: 117px;
                                left: 529px;
                            }

                            &:nth-of-type( 3 ) {
                                top: 362px;
                                left: 189px;
                            }

                            &:nth-of-type( 4 ) {
                                top: 362px;
                                left: 691px;
                            }
                        }
                    }

                    &:nth-of-type( 2 ) {
                        width: calc( 100% - 898px - 28px );
                        margin-right: 0;

                        >.chart-box {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }


            }

            >.bottom-panel {
                height: 602px;
                width: 100%;
                background: #FFFFFF;
                border-radius: 8px;
                padding: 40px;
                box-sizing: border-box;

                >.panel-content {
                    width: 100%;
                    height: calc( 100% - 28px - 20px );
                    margin-top: 20px;
                    border-radius: 8px;
                    border: 1px solid #CFD1D8;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;

                    >.content-item {
                        height: 100%;
                        width: 461px;

                        >.item-head {
                            height: 48px;
                            line-height: 47px;
                            border-bottom: 1px solid #EEEFF2;
                            border-right: 1px solid #EEEFF2;
                            border-left: 1px solid #EEEFF2;
                            display: flex;
                            box-sizing: border-box;

                            >span {
                                font-size: 16px;
                                font-weight: 600;
                                color: #0E1526;
                                text-align: center;
                                flex: 1;

                                &:nth-of-type(1) {
                                    flex: 1.3;
                                    text-align: left;
                                    padding-left: 40px;
                                    box-sizing: border-box;
                                    border-right: 1px solid #EEEFF2;
                                }
                            }
                        }

                        >.item-body {
                            width: 100%;
                            height: calc( 100% - 48px );

                            .item-body-tr {
                                height: 48px;
                                line-height: 47px;
                                border-bottom: 1px solid #EEEFF2;
                                border-right: 1px solid #EEEFF2;
                                border-left: 1px solid #EEEFF2;
                                display: flex;
                                box-sizing: border-box;

                                >span {
                                    font-size: 14px;
                                    color: #0E1526;
                                    text-align: center;
                                    flex: 1;

                                    &:nth-of-type(1) {
                                        flex: 1.3;
                                        text-align: left;
                                        padding-left: 40px;
                                        box-sizing: border-box;
                                        border-right: 1px solid #EEEFF2;
                                    }

                                    &:nth-of-type( 2 ) {

                                        >span {
                                            width: 16px;
                                            height: 16px;
                                            background: #CFD1D8;
                                            display: inline-block;
                                            border-radius: 50%;
                                            position: relative;
                                            top: 3px;

                                            &.is_red {
                                                background-color: #FF3B30;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
